<template>
	<view class="content">
		<view class="header">
			<view class="box">
				<text class="iconfont icon-left" @click="go()"></text>
				<text class="title">我的</text>
				<text class="iconfont icon-shezhi" @click="link('/pages/user/setting')" style="color: #DBAC53;"></text>
			</view>
		</view>
		<view class="userinfo" @click="link('/pages/user/userInfo')">
			<view class="fl"> 
				<image src="../../static/icon1.png" mode=""></image>
				<view>
					<text class="f">用户名</text>
					<text class="ff">{{user_info.username}}</text>
				</view>
			</view>
			<view class="fr">
				<text class="f">{{user_info.account.account}}金盾</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="fl">
					<text class="iconfont icon-falv" style="font-size: 50rpx;"></text>
				</view>
				<view class="fr">
					<text class="f">聘请法务</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" @click="link('/pages/order/list')">
				<view class="fl">
					<text class="iconfont icon-dingdan" style="color: #F29C2F;"></text>
				</view>
				<view class="fr">
					<text class="f">服务订单</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item">
				<view class="fl">
					<text class="iconfont icon-chongzhi1" style="color: #E25804;"></text>
				</view>
				<view class="fr">
					<text class="f">在线充值</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item" @click="link('/pages/user/userAccount')">
				<view class="fl">
					<text class="iconfont icon-chongzhi" style="color: #0090FA;"></text>
				</view>
				<view class="fr">
					<text class="f">我的余额</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item" @click="link('/pages/user/user_file')">
				<view class="fl">
					<text class="iconfont icon-wendang" style="color: #F29C2F;"></text>
				</view>
				<view class="fr">
					<text class="f">我的文档</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item" @click="link('/pages/gongsufei/gongsufei')">
				<view class="fl">
					<text class="iconfont icon-jisuanqi" style="color: #0590EB;"></text>
				</view>
				<view class="fr">
					<text class="f">诉讼费计算</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item" @click="link('/pages/lvshifeigusuan/lvshifeigusuan')">
				<view class="fl">
					<text class="iconfont icon-jifen" style="color: #38AA93;"></text>
				</view>
				<view class="fr">
					<text class="f">律师费估算</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
		
		<view class="list">
			<view class="item" @click="link('/pages/user/message_setting')">
				<view class="fl">
					<text class="iconfont icon-tixing" style="color: #0094E9;font-size: 50rpx;"></text>
				</view>
				<view class="fr">
					<text class="f">消息提醒</text>
					<view>
						<text class="ff">聊天消息提醒</text>
						<text class="iconfont icon-right"></text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="fl">
					<text class="iconfont icon-shezhi" style="color: #0094E9;"></text>
				</view>
				<view class="fr">
					<text class="f">系统通知</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item" @click="link('/pages/tousujianyi/tousujianyi')">
				<view class="fl">
					<text class="iconfont icon-jianyi" style="color: #0094E9;"></text>
				</view>
				<view class="fr">
					<text class="f">投诉建议</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="item">
				<view class="fl">
					<text class="iconfont icon-about" style="color: #0094E9;"></text>
				</view>
				<view class="fr">
					<text class="f">关于我们</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<diy></diy>
	</view>
</template>

<script>
	import diy from '@/components/diy.vue';
	export default {
		components:{
			diy
		},
		data() {
			return {
				user_info:{}
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			link(n) {
				uni.navigateTo({
					url: n,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			go(){
				uni.navigateBack({
					delta:1
				})
			},
			getData(){
				let self = this;
				uni.getStorage({
					key:'user_info',
					success:function(res){
						self.user_info = res.data;
						console.log(res.data);
					},
					fail:function(){
						uni.redirectTo({
							url : '/pages/login/login',
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input,
	textarea {
		box-sizing: border-box;
	}

	page {
		background: #F1F1F1;
	}

	.userinfo{
		overflow: hidden;
		background: #fff;
		width: 100%;
		height: 165rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
		padding: 0 20rpx 0 30rpx;
		.fr{
			overflow: hidden;
			display: flex;
			align-items: center;
			.f{
				display: block;
				font-size: 24rpx;
				color: #FA6400;
			}
			.iconfont{
				margin-left: 30rpx;
				color: #C0C0C0;
			}
		}
		.fl{
			overflow: hidden;
			display: flex;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				display: block;
				border-radius: 50%;
			}
			view{
				overflow: hidden;
				margin-left: 21rpx;
				.f{
					display: block;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					color: #DBAC53;
				}
				.ff{
					display: block;
					font-size: 23rpx;
					color: #153B33;
				}
			}
		}
	}
	.list {
		overflow: hidden;
		margin-bottom: 25rpx;
		background: #fff;
		.item {
			overflow: hidden;
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			.fl{
				width: 96rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					color: #0990EC;
					font-size: 45rpx;
				}
			}
			.fr{
				overflow: hidden;
				width: 644rpx;
				height: 90rpx;
				padding-right: 20rpx;
				border-bottom: 1px solid #EDEDED;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.ff{
						font-size: 25rpx;
						color: #C7C7C7;
						margin-right: 20rpx;
					}
				}
				.f{
					font-size: 28rpx;
					color: #2D2D2D;
				}
				.iconfont{
					color: #C0C0C0;
				}
			}
		}
	}

	.content {
		overflow: hidden;
		width: 100%;
		position: relative;

		.header {
			overflow: hidden;
			width: 100%;
			background-image: url(../../static/fawu_06.jpg);
			background-size: 100% 33rpx;
			background-repeat: no-repeat;
			background-position: bottom center;
			height: 155rpx;
			background-color: #153B33;
			position: relative;
			padding: 60rpx 0 0 0;

			.box {
				overflow: hidden;
				width: 100%;
				display: flex;
				position: relative;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 28rpx;
					color: #DBAC53;
				}
				.icon-shezhi{
					position: absolute;
					right: 17rpx;
					top: 50%;
					font-size: 30rpx;
					transform: translateY(-50%);
				}
				.icon-left{
					color: #DBAC53;
					position: absolute;
					left: 17rpx;
					font-size: 35rpx;
					top: 50%;
					transform: translateY(-50%);
				}
				
			}
		}
	}
</style>
